<template>
  <div
    class="swiper-picture"
    :class="{ placeholder: !isNotEmpty(activeImg.imgSrc) }"
    :style="{ ...border, backgroundSize: activeImg.objectFit }"
  >
    <img
      v-if="isNotEmpty(activeImg.imgSrc)"
      class="fulled-w fulled-h"
      :style="{ objectFit: activeImg.objectFit }"
      :src="$staticRes(activeImg.imgSrc)"
    />
  </div>
</template>

<script>
  import { isNotEmpty } from '@/utils';
  import borderMixin from '@/mixins/borderMixin';

  export default {
    mixins: [borderMixin],
    props: {
      widget: {
        type: Object,
        default: () => ({})
      }
    },

    computed: {
      config() {
        return this.widget.config;
      },
      style() {
        return this.widget.style;
      },
      activeIndex() {
        return this.widget.data.activeIndex;
      },
      activeImg() {
        return this.config.imgList[this.activeIndex];
      }
    },

    methods: {
      isNotEmpty
    }
  };
</script>

<style lang="scss" scoped>
  .swiper-picture {
    overflow: hidden;

    &.placeholder {
      @include staticBg('/admin/images/marketing/landingPage/widgets/material/swiper-picture-placeholder.png');
      background-repeat: no-repeat;
      background-position: center;
      background-clip: content-box;
    }
  }
</style>
